<template>
  <div>
    <!-- 商品信息 -->
    <section class="pro-msg m_b20">
      <!-- 商品图片 -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-if="typeof(proMsg.cover_img)=='string'">
            <img :src="proMsg.cover_img" alt="" class="pro-img" @click="showProBigImg(proMsg.cover_img)">
          </div>
          <div v-else class="swiper-slide" v-for="(item,index) in proMsg.cover_img">
            <img :src="item" alt="" class="pro-img" @click="showProBigImg(item)">
          </div>
        </div>
      </div>
      <!-- 商品其他信息 -->
      <div class="pro-other-msg">
        <!-- 商品名称 -->
        <p class="pro-title color_33 font_size32 font-bold">{{proMsg.package_name}}</p>
        <!-- 商品价格及分享 -->
        <div class="pro-price-share flex flex-pack-justify">
          <span class="pro-price color_fc">￥{{Number(proMsg.price).toFixed(2)}}</span>
          <div class="share flex flex-v flex-align-center" @click="shareFuc">
            <img src="../assets/img/prodetais/share.png" alt="" class="share-img">
            <span class="share-text color_33 font_size20">分享</span>
          </div>
        </div>
        <!-- 发货方式及销量 -->
        <div class="mode-sales flex font_size20 color_99">
          <span>发货方式</span>
          <div class="flex m_l20">
            <div class="express-take" v-for="(item,index) in modeTextImg">
              <img :src="index==proMsg.mode?item.urlActive:item.url" alt="" class="mode-img">
              <span class="mode-text" :class="index==proMsg.mode?'active':''">{{item.text}}</span>
            </div>
          </div>
          <span class="sales">销量:{{proMsg.sales_volume}}</span>
        </div>
        <!-- 评论 -->
        <p class="comment color_66 m_b20 font-bold">{{proMsg.goods_brief}}</p>
        <!-- 标签 -->
        <div class="flex">
          <div class="tag font_size20 color_0d">{{tag}}</div>
          <div class="small-tag font_size20 color_fc">{{smallTag}}</div>
        </div>
      </div>
    </section>
    <!-- 商品详情、评价记录 -->
    <section class="details-evaluate bg_colorff">
      <!-- tabs -->
      <div class="flex m_b20">
        <span
          class="tabs-text font_size32 color_33 p_b20 font-bold"
          v-for="item in tabsArr"
          :class="item.status?'active':''"
          @click="changeTabs(item.title)"
        >{{item.title}}</span>
      </div>
      <!-- 商品详情 -->
      <div v-if="tabsName == '商品详情'">
        <img :src="item" alt="" v-for="item in proMsg.content" class="detail-img">
      </div>
      <!-- 评价记录 -->
      <div v-else>
        <ul class="evaluate-ul">
          <li class="evaluate-item font_size24 p_b30 p_t30" v-for="(item,index) in evaluateArr">
            <!-- 头像、用户名、购买数量 -->
            <div class="avatar-name-count flex flex-pack-justify flex-align-center">
              <img :src="item.img" alt="" class="avatar">
              <span class="color_99 uname flex-1">{{item.username.replace(item.username.charAt(1),'*')}}</span>
              <span class="color_0d font-bold">购买数量:{{item.goods_num}}</span>
            </div>
            <!-- 成交时间 -->
            <p class="color_99">成交时间:{{item.create_time}}</p>
            <!-- 评价内容 -->
            <p class="color_33 evaluate-content font-bold">{{item.content}}</p>
            <!-- 评论图片 -->
            <div class="evaluate-img-box flex" v-if="item.images.length">
              <img v-if='typeof(item.images) == "string"'
                :src="item.images"
                alt=""
                class="evaluate-img m_t20"
                @click="showEvaluateBigImg(item.images)"
              >
              <img v-else
                :src="elem"
                alt=""
                v-for="(elem,i) in item.images"
                class="evaluate-img m_t20"
                @click="showEvaluateBigImg(elem)"
              >
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!-- 底部 -->
    <section class="bottom-tabs">
      <div class="server-buy flex bg_colorff flex-align-center flex-pack-justify">
        <div class="t_center server-img-text" @click="showServerShade">
          <img src="../assets/img/prodetais/server.png" alt="" class="server-img">
          <span class="color_33 font_size20">客服</span>
        </div>
        <span class="color_fc font_size32 bottom-price">￥{{Number(proMsg.price).toFixed(2)}}</span>
        <span
          class="buy-btn color_ff font_size32 t_center font-bold"
          @click="jumpToBuyPage(proMsg.proID)"
        >立即购买</span>
      </div>
    </section>
    <!-- 遮罩 -->
    <section class="shade" v-if="isShowShade" @click="closeShade">
      <!-- 呼叫客服 -->
      <div class="call-server bg_colorff t_center" v-if="shadeShowContent == 'server'">
        <div class="server-tel">
          <p class="font_size24 server-txt">客服联系电话</p>
          <p class="font_size32 server-txt">{{proMsg.service_phone}}</p>
        </div>
        <p class="call border_b font-bold">
          <a :href="'tel:'+proMsg.service_phone" class="call font_size32 color_0d">呼叫</a>
        </p>
        <p class="call font_size32 font-bold">取消</p>
      </div>
      <!-- 产品大图 -->
      <img
        :src="bigProImgUrl"
        alt=""
        class="shade-big-pro-img"
        v-if="shadeShowContent == 'bigProImg'"
      >
      <!-- 评论大图 -->
      <img
        :src="evaluateBigImg"
        alt=""
        class="shade-big-pro-img"
        v-if="shadeShowContent == 'evaluateBigImg'"
      >
    </section>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import {wxShare} from '../util/wxShare'

export default {
  data() {
    return {
      proMsg: {}, //上半部分所有商品信息
      tag: "", //小标签
      smallTag: "", //小小标签
      modeTextImg: [
        {
          url: "/static/imgs/prodetailPage/check-not.png",
          urlActive: "/static/imgs/prodetailPage/checked.png",
          text: "快递"
        },
        {
          url: "/static/imgs/prodetailPage/check-not.png",
          urlActive: "/static/imgs/prodetailPage/checked.png",
          text: "自提"
        }
      ], //快递或自提数据
      tabsArr: [
        {
          title: "商品详情",
          status: 1
        },
        {
          title: "评价记录",
          status: 0
        }
      ], //tabs
      tabsName: "商品详情", //tabs名称
      evaluateArr: [], //评价记录数组
      isShowShade: false, //是否显示遮罩
      shadeShowContent: "", //遮罩显示的内容
      bigProImgUrl: "", //需要全屏展示的产品图链接
      evaluateBigImg: "" //需要全屏展示的评论图链接
    };
  },

  mounted() {
    new Swiper(".swiper-container", {});
    this.getPageData();
    this.onShare(); //初始化分享
  },

  methods: {
    //获取商品详情页面数据
    getPageData() {
      this.$util
        .get("goods/getGoodsPackageInfo", {
          goods_id: this.$route.params.proID
        })
        .then(res => {
          this.proMsg = res.data;
          console.log(this.proMsg)
          this.tag = this.proMsg.remark[0];
          this.smallTag = this.proMsg.remark[1];
        });
    },
    //获取商品评价页面数据
    getCommentPageData() {
      this.$util
        .get("goods/getGoodsPackageComment", {
          goods_id: this.$route.params.proID
        })
        .then(res => {
          this.evaluateArr = res.data;
        });
    },
    //点击分享
    shareFuc() {
      if (this.$store.state.userinfo.uid) {
        //跳转分享
         alert('点击右上角分享按钮');
      } else {
        //跳转登录
      }
    },

    // 初始化分享信息
    onShare(){
        var share_config = {
            title: '测试', // 分享标题
            desc: '这是描述2',
            link: `${window.location.href}?uid=${this.$store.state.userinfo.uid}`, // 分享链接
            imgUrl: '' // 分享图标
         }
         wxShare(share_config).catch(error => Toast(error.message))
    },


    //点击切换商品详情和评价内容
    changeTabs(txt) {
      this.tabsArr.forEach(item => {
        if (item.title == txt) {
          item.status = 1;
        } else {
          item.status = 0;
        }
      });
      this.tabsName = txt;
      //点击请求评价记录
      if (txt == "评价记录" && !this.evaluateArr.length) {
        this.getCommentPageData()
      }
    },
    // 点击跳转购买页面
    jumpToBuyPage(pID) {
      var info = {
        id: this.proMsg.id,
        num: 1,
        package_name: this.proMsg.package_name,
        price: this.proMsg.price
      }
      this.$router.push({path: '/pay', query: {id: info}});
      // if (this.$store.state.userinfo.uid) {
      //   //跳转购买
      //   this.$util.post('order/postCreateOrder', {
      //     uid: this.$store.state.userinfo.uid,
      //
      //   })
      // } else {
      //   //跳转登录
      // }


    },
    //点击显示呼叫客服
    showServerShade() {
      if (this.$store.state.userinfo.uid) {
        this.isShowShade = true;
        this.shadeShowContent = "server";
      } else {
        //跳转登录
      }
    },
    //点击遮罩层关闭遮罩
    closeShade() {
      this.isShowShade = false;
    },
    //点击放大产品图
    showProBigImg(url) {
      this.bigProImgUrl = url;
      this.isShowShade = true;
      this.shadeShowContent = "bigProImg";
    },
    //点击放大评论大图
    showEvaluateBigImg(url) {
      this.evaluateBigImg = url;
      this.isShowShade = true;
      this.shadeShowContent = "evaluateBigImg";
    }
  }
};
</script>
<style lang='less' scoped>
@import url(../assets/css/prodetail/prodetail.less);
</style>
